<template>
	<view>
		<u-popup :show="show" mode="bottom" top="10vh" round="10" @close="close" @open="getCoupon" closeable>
			<view class="flex flex-direction overflow-hidden">
				<view class="padding text-center text-lg solid-bottom">选择优惠券</view>
				<view class="padding-xs list padding-top" v-if="couponList.length > 0">
					<view class="item padding bg-gray radius-xl margin-bottom coupon" v-for="(item, index) in couponList"
						:key="index" :class="hasUse(item) ? '' : 'view-gray'">
						<view class="money-text text-center solid-right padding-right">
							<view class="money text-red">
								<text class="text-sm">￥</text>
								<text class="number text-bold">{{ item.money }}</text>
							</view>
							<view class="text-red text-sm">
								最高可减
							</view>
						</view>
						<view class="right crow">
							<view class="nameBox margin-left">
								<view class="name text-black text-bold padding-bottom-xs">
									{{ item.title }} <!--  -->
								</view>
								<view class="min text-gray padding-bottom-xs">
									<text class="text-sm text-gray"
										v-if="item.use_type === 'FULL_DEC'">满{{ item.full_money }}可用</text>
									<text class="text-sm text-gray" v-else-if="item.use_type === 'DEC'">无门槛</text>
								</view>
								<view class="min text-gray" v-if="item.end_time">
									有效期至 {{ item.end_time }}
								</view>
							</view>
							<!-- <view class="right-border solid-left"></view> -->
							<view class="linqu">
								<button class="cu-btn bg-green sm round shadow" v-if="hasUse(item)" @click="use(item)">
									<text class="padding-sm">使用</text>
								</button>
								<button class="cu-btn bg-green sm round shadow" v-else>暂不可用</button>
								<!-- <view class="text-sm text-center text-gray">
									*限门店使用
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<emptyData type="notOrder" top="10" v-else text="暂无可用优惠券"></emptyData>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		price: {
			type: Number,
			default: 0,
		},
		show: {
			type: Boolean,
			default: false,
		}
	},
	watch: {
		price(val) {
			for (let i = 0; i < this.selected.length; i++) {
				const item = this.selected[i];
				switch (item.use_type) {
					case 'FULL_DEC':
						if (val < item.full_money) {
							this.selected.splice(i, 1);
							this.close();
						}
						break;
				}
			}
		}
	},
	data() {
		return {
			selected: [],
			couponList: []
		}
	},
	mounted() {
		this.couponList = this.list;
	},
	methods: {
		getCoupon() {
			this.$utils.$api.Coupon.getAvailable().then(res => {
				this.couponList = res.data;
			}).catch(()=>{})
		},
		hasUse(item) {
			switch (item.use_type) {
				case 'FULL_DEC':
					return this.price >= item.full_money;
				case 'DEC':
					return true;
				default:
					return false;
			}
		},
		use(item) {
			this.selected = [item];
			this.$emit('couponPopup', {
				ids: [item.code],
				coupon: [item]
			})
		},
		close() {
			this.$emit('couponPopup')
		},
		open() {

		}
	}
}
</script>

<style lang="less" scoped>
.overflow-hidden{
	overflow: hidden;
}
.list {
	flex:1;
	overflow-y: auto;
	.item {
		position: relative;
		display: flex;
		align-items: center;

		.money-text {
			width: 170upx;

			.money {
				.number {
					font-size: 40upx;
				}
			}
		}

		.right {
			flex: 1;
			justify-content: space-between;

			.nameBox {
				.name {
					font-size: 30upx;
				}

				.min {
					font-size: 24upx;
				}
			}

			// .right-border{
			// 	width: 5upx;
			// 	height: 100%;
			// }
		}
	}
}

.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	background-color: white;
	width: 20upx;
	height: 20upx;
}

.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
	border-radius: 50% 50% 0 0;
	/* 底部两个半圆 */
}</style>
